<template>
  <div>
    <div class="con" style="position:relative;top:46px;">
           <noticebar 
            title="牌照自动读取信息，请保证文字清晰可见，照片不要反光" 
            icon='http://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'>
            
            </noticebar>

            <img style="width:10rem;" src="../assets/u110.png" alt="">
        <van-cell-group>

                <van-field
                    v-model="licenseNo"
                    label="车牌号"
                    type="textarea"
                    placeholder="请输入车牌号"
                    rows="1"
                    autosize
                />
                <van-field
                    v-model="frameNo"
                    label="车架号"
                    type="textarea"
                    placeholder="请输入车架号"
                    rows="1"
                    autosize
                />
                <van-field
                    v-model="engineNo"
                    label="发动机号"
                    type="textarea"
                    placeholder="请输入发动机号"
                    rows="1"
                    autosize
                />
                <van-cell is-link @click="showPop">
                    <template slot="title">
                        <span class="van-cell-text">初登日期</span>
                        <!-- <van-switch v-model="checked" size="20px" class="swich"/> -->
                        <span class="van-cell-text" style="position:absolute; left :105px; ">{{licenseDate}}</span>
                    </template>
                </van-cell>
                <van-cell is-link @click="toCarlist">
                    <template slot="title">
                        <span class="van-cell-text">车型</span>
                        <!-- <van-switch v-model="checked" size="20px" class="swich"/> -->
                        <span class="van-cell-text" style="position:absolute; left :105px; " >{{value}}</span>
                    </template>
                </van-cell>
        </van-cell-group>
    <div class="btnCon"> 
      <van-button size="large" type="default" @click="toUser">提交</van-button>
    </div>
    
    <van-popup v-model="show" position="bottom" :overlay="true" class="pop">
        <van-datetime-picker
            v-model="currentDate"
            type="date"
            :max-date='new Date()'
            @cancel="closeA" @confirm='confirmA'
            />
   
      </van-popup> 
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import noticebar from "../components/noticebar.vue";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  components: { navbar, noticebar },
  data() {
    return {
      value: "",
      engineNo: "",
      msg: "",
      diqu: "110100",
      firstRegisterDate: "",
      frameNo: "",
      licenseNo: "",
      // chepai:'',
      // chejia:'',
      // fadong:'',
      //初登日期
      // firstDate:'',
      licenseDate: "",
      show: false,
      currentDate: new Date(),
      show2:false,
      clpp: "",
      Address: "",
      cityCode: "",
    };
  },
  mounted() {
    // console.log(this.$route.query);
    if (this.$route.query.engineNo) {
      this.engineNo = this.$route.query.engineNo;
    }
    if (this.$route.query.licenseDate) {
      this.licenseDate = this.$route.query.licenseDate;
    }
    if (this.$route.query.frameNo) {
      this.frameNo = this.$route.query.frameNo;
    }
    if (this.$route.query.licenseNo) {
      this.licenseNo = this.$route.query.licenseNo;
    }

    if (this.$route.query.clpp) {
      this.clpp = this.$route.query.clpp;
    }
    if (this.$route.query.Address) {
      this.Address = this.$route.query.Address;
    }
    if (this.$route.query.cityCode) {
      this.cityCode = this.$route.query.cityCode;
    }

    if (this.$route.query.value) {
      this.value = this.$route.query.value;
    }
    if (this.$route.query.carModelId) {
      this.carModelId = this.$route.query.carModelId;
    }
  },
  methods: {
    showPop: function() {
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
      showPop2: function() {
      if (this.show2) {
        this.show2 = false;
      } else {
        this.show2 = true;
      }
    },
    closeA: function() {
      this.show = false;
       this.show2 = false;
    },
    confirmA: function(data) {
      //   console.log(data);
      //   console.log(this.formatDate(data))
      //   // this.diqu = ;
      this.show = false;
      this.licenseDate = this.formatDate(data);
    },
     confirmB: function(data) {
      //   console.log(data);
      //   console.log(this.formatDate(data))
      //   // this.diqu = ;
      this.show2 = false;
      this.msg = data[0].name + data[1].name;
      this.diqu = data[1].code;
    },
    formatDate: function(time) {
      var date = new Date(time);

      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var newTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day);

      return newTime;
    },
    toCarlist: function() {
      console.log(this.clpp);
      console.log(this.frameNo);
      console.log(this.engineNo);
      console.log(this.licenseDate);

      console.log(this.frameNo);
      console.log(this.engineNo);
      console.log(this.licenseDate);
     
      this.$router.push({
        name: "CarList",
        query: {
          clpp: this.clpp,
          // clpp:'奥迪FV7203BADBG轿车',
          Address: this.Address,
          cityCode: this.cityCode,
          licenseNo: this.licenseNo,
          frameNo: this.frameNo,
          engineNo: this.engineNo,
          licenseDate: this.licenseDate
        }
      });
    },
    toUser:function(){
         if (
            this.frameNo == "" ||
            this.engineNo == "" ||
            this.licenseDate == "" ||
            this.value == ""
        ) {
            Toast("请补全信息");
            return;
        }
        this.$router.push({
          name: "CarUser",
          query: {
            value:this.value,
            carModelId:this.carModelId,
            licenseDate:this.licenseDate,
            frameNo:this.frameNo,
            engineNo:this.engineNo,
            Address:this.Address,
            cityCode:this.cityCode,
            licenseNo:this.licenseNo,
           
          }
        });
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  width: 10rem;
  // margin-top: 50px;
  //   .swich {
  //     position: absolute;
  //     top: 0.27rem;
  //     right: 0.4rem;
  //   }
  .btnCon {
    width: 6rem;
    margin: 2rem auto;
  }
  .pop {
    width: 10rem;
  }
}
</style>
